// import logo from './logo.svg';
import { Component } from 'react';
import './App.css';
import SLM from './slm/SLM';
import MLInAction from './MLInAction/MLInAction';

const BookList=[
  {id:'SLM', value:'统计学习方法'},
  {id:'MLInAction', value:'机器学习实战'}
];

class App extends Component {
  constructor(props){
    super(props);

    this.state={
      showMenu : true,
      book     : ''
    }

    this.handleButtonClicked = this.handleButtonClicked.bind(this);
  }

  componentDidMount(){
    this.setState({
      showMenu : false,
      book     : 'SLM'
    });
  }

  handleButtonClicked(event){
    this.setState({
      showMenu : false,
      book     : event.target.id
    });
  }

  showHome(){
    this.setState({
      showMenu : true,
      book     : ''
    });
  }

  _createMenu(){
    return BookList.map((item, key)=><button key={key} id={item.id} onClick={this.handleButtonClicked}>{item.value}</button>);
  }

  _loadBook(){
    const book = this.state.book;
    switch(book){
      case 'SLM' : return <SLM home={this.showHome.bind(this)}/>;
      case 'MLInAction' : return <MLInAction home = {this.showHome.bind(this)}/>;
      default    : return '建设中ing...';
    }
  }

  render(){
    if(this.state.showMenu){
      return (
        <div className='App'>
          <div className='App-head'>  
            机器学习在线学习平台
          </div>
          <div className='App-menu'>
            {this._createMenu()}
          </div>
        </div>
      );
    }
    else{
      return(
        <div className='App-body'>
          {this._loadBook()}
        </div>
      );
    }
  }
}

export default App;
